<script lang="ts" setup>
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn'; // 引入中文语言包
import relativeTime from 'dayjs/plugin/relativeTime';
import { LikeFilled, LikeOutlined, DislikeFilled, DislikeOutlined } from '@ant-design/icons-vue';
import 'dayjs/locale/zh-cn'; // 引入中文语言包
import type { Comment1 } from '../types/user-type';
dayjs.extend(relativeTime);
dayjs.locale('zh-cn'); // 设置 dayjs 的语言为中文


const props = defineProps<{
  comments: Comment1[];
}>();


const likes = ref<number>(0);
const dislikes = ref<number>(0);
const action = ref<string>();

const like = () => {
  likes.value = 1;
  dislikes.value = 0;
  action.value = 'liked';
};

const dislike = () => {
  likes.value = 0;
  dislikes.value = 1;
  action.value = 'disliked';
};

const handleReply =()=>{
  console.log('你好')
}
</script>


<template>
  <a-comment v-for="item in props.comments" :key="item.id">

    <!-- 用户名 author-->
    <template #author>
      <a>{{ item.author }}</a>
    </template>
    <!-- 头像 avatar-->
    <template #avatar>
      <a-avatar :src="item.avatar" alt="Han Solo" />
    </template>
    <!-- 评论内容 content-->
    <template #content>
      <p>
        {{ item.content }}
      </p>
    </template>
    <!-- 发表时间 datetime-->
    <template #datetime>
      <a-tooltip :title="dayjs().format('YYYY-MM-DD HH:mm:ss')">
        <span>{{ item.datetime  }}</span>
      </a-tooltip>
    </template>

    <!-- 点赞评论回复 -->
    <template #actions>
      <span key="comment-basic-like">
        <a-tooltip title="Like">
          <template v-if="action === 'liked'">
            <LikeFilled @click="like" />
          </template>
          <template v-else>
            <LikeOutlined @click="like" />
          </template>
        </a-tooltip>
        <span style="padding-left: .5rem; cursor: auto">
          {{ likes }}
        </span>
      </span>
      <span key="comment-basic-dislike">
        <a-tooltip title="Dislike">
          <template v-if="action === 'disliked'">
            <DislikeFilled @click="dislike" />
          </template>
          <template v-else>
            <DislikeOutlined @click="dislike" />
          </template>
        </a-tooltip>
        <span style="padding-left: .5rem; cursor: auto">
          {{ dislikes }}
        </span>
      </span>
      <span key="comment-nested-reply-to" @click="handleReply">回复</span>
    </template>
  </a-comment>


</template>
